<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>西瓜投手</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/detailed.css">
    <script src="./js/vue.js"></script>
    <script src="./js/index.js"></script>
</head>

<body>
    <div class="bigbox">
        <div id="app" class="center">

            <el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple-dark"></div>
                </el-col>
            </el-row>


            <el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple"><img class="img-head" src="../imgs/标题海报.png"></div>
                </el-col>
            </el-row>


            <el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple-dark"></div>
                </el-col>
            </el-row>


            <el-row gutter="5">
                <el-col :span="4">
                    <div class="grid-content bg-purple"><img class="img-ico" src="../imgs/ico/植物图鉴.png"></div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple-light"><img class="img-ico" src="../imgs/ico/僵尸图鉴.png"></div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple"><img class="img-ico" src="../imgs/ico/关卡攻略.png"></div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple-light"><img class="img-ico" src="../imgs/ico/游戏介绍.png"></div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple"><img class="img-ico" src="../imgs/ico/游戏周边.png"></div>
                </el-col>

                <!-- 搜索框部分-->
                <el-col :span="4" class="mt-5">
                    <el-input placeholder="请输入内容" prefix-icon="el-icon-search">
                    </el-input>
                </el-col>
            </el-row>

            <!-- ----------------------------------------------------------------------------------------------------------------------------- -->


            <!-- 植物攻略详情界面 -->


            <el-container>
                <el-aside width="300px">
                    <div class="img-box">
                        <img class="el-asdie-img1" src="../imgs/botanys/西瓜投手.png">
                        <img class="el-asdie-img2" src="../imgs/botanys/西瓜投手.gif">
                    </div>

                </el-aside>

                <el-main>
                    <h2>西瓜投手</h2>
                    <div>
                        <video width="320" height="240" controls>
                            <source src="../imgs/botanys/watermelon.mp4" type="video/mp4">
                        </video>
                    </div>

                    <div class="botany-t">
                        <table>
                            <tr>
                                <dt>阳光: 300</dt>
                                <dt>冷缩: 4.5s</dt>
                                <dt>攻击: 80</dt>
                                <dt>血量: 300</dt>
                                <dt>类别: roof</dt>
                            </tr>
                        </table>
                    </div>
                </el-main>

                <el-aside width="300px">
                    <div class="mulv">
                        <h3>目录</h3>
                        <a href="./index.html">
                            <li>首页</li>
                        </a>
                        <a href="">
                            <li>植物</li>
                        </a>
                        <a href="">
                            <li>僵尸</li>
                        </a>
                        <a href="">
                            <li>关卡攻略</li>
                        </a>
                        <a href="">
                            <li>游戏介绍</li>
                        </a>
                        <a href="">
                            <li>游戏周边</li>
                        </a>
                    </div>
                </el-aside>
            </el-container>
            </el-container>

            <el-container>
                <el-main width="300px">
                    <div class="strategy">
                        <h3>使用攻略</h3>
                        <p>冷却7.5 阳光325 2.9秒/发扔三乘三溅射的西瓜,生命值300/450/600/750/900<br> 1阶,直接命中80,溅射伤害40
                            <br> 2阶,直接命中120,溅射伤害60,25%概率丢出2个西瓜
                            <br> 3阶,直接命中160,溅射伤害80,50%丢出2个西瓜
                            <br> 4阶,直接命中200,溅射伤害100,80%落地开大
                            <br> 5阶,直接命中240,溅射伤害120,25%扔出三个300直接伤害、60溅射伤害的西瓜片
                            <br> 大招效果:投掷至少4个伤害100*(植物阶数+1)的大西瓜,
                            <br> 装扮效果:大招伤害150*(1+植物阶数) 五阶西瓜片不会被洋伞和小丑免疫
                            <br>
                        </p>
                    </div>

                    <div class="strategy1">
                        <h3>相关植物</h3>
                        <!-- <div class="img-t"> -->
                        <img src="../imgs/botanys/玉米投手.png" title="玉米投手">
                        <img src="../imgs/botanys/卷心菜投手.png" title="卷心菜投手">
                        <img src="../imgs/botanys/冰瓜投手.png" title="冰壶投手">
                        <!-- </div> -->

                    </div>

                    <div class="strategy2">
                        <h3>设计原型or周边</h3>
                        <a href="https://detail.1688.com/offer/633420480587.html?spm=a261b.2187593.0.0.5fb74af3Fz1TQ8">
                            <img src="../imgs/botanys/watermelon.jpg"></a>
                    </div>
                </el-main>

                <el-aside width="300px">
                    <div class="comment">
                        <h3>论坛热门贴</h3>
                        <img src="../imgs/botanys/热评.png">
                    </div>
                </el-aside>
            </el-container>


            <el-container>
                <el-footer>

                </el-footer>
            </el-container>


        </div>
    </div>


</body>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            show: true,
            value: true,
            input: ''
        }
    })
</script>